<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
  1.dif算法是一种对比算法 对比就虚拟dom和新虚拟dom,对比出是哪个虚拟节点更改了,找出这个虚拟节点,并值更新这个虚拟节点所对应的真实节点 而不用更新其他数据没有发生改变的节点,实现精确更新真实dom 进而提高效率
  key可以避免按顺序对比 而是根据key一一对应  如果值一样 则不更新 如果key对应的值不一样 则更新 如果找不到key 则生成一个新的虚拟dom并渲染 
类式组件的定义方式 使用class关键字来创建react组件
在类中书写一个render方法，函数中返回一个虚拟DOM，当类组件被实例化的时候会自动调用内部的render函数
组件实例三大核心属性:1.state
什么是state
状态 用户的页面会根据状态的改变而改变
state只能在本组件去初始化,并且state只能被本组件去修改和访问
在 React 中不能通过返回 false 的方式阻止默认行为。必须显式的使用 preventDefault preventDafault
react绑定事件
在任意位置定义一个函数，作为事件函数
在应该被绑定事件的虚拟DOM的属性上添加事件属性，格式是onXxxxx(例如onClick)，注意这个事件属性是react封装的，而不是原生js中的语法
虚拟DOM的事件属性的值是事件函数的名称，并且要放在{}中，当事件发生的时候，改函数会立即调用
4.1 理解
**props就是组件定义属性的集合,**它是组件对外的接口,由外部通过JSX属性传入设置(也就是从外部传递给内部组件的数据)
每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中
 组件实例三大核心属性3:refs
Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。
useState()：保存状态
useContext()：保存上下文 共享状态钩子
useEffect()是通用的副效应钩子
作用:
      获取数据（data fetching）
      事件监听或订阅（setting up a subscription）
      改变 DOM（changing the DOM）
      输出日志（logging）
Hook 使用规则
Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：
只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用
状态提升 在需要通信传输数据的兄弟组件的父亲上 放一个state状态传递给他们 让他们都拥有这个继承来的属性 可以修改和获取
订阅和推送 pubsub 一个订阅 首次不会推送 在副作用时推送数据 达成更新渲染时推送 
redux推送数据 一个公共的仓库store 需要获取数据的组件订阅它 引入action请求来获取数据和修改将默认值修改再传给调用的dispatch Selection来获得值 发送action请求 reducers进行处理  
共享状态 store引入reducers来将并执行 将返回值赋值给组件 合并多个reducer,并给每一个reducer返回的数据用一个key保存
createSlice:接受一个初始状态和一个带有reducer名称和函数的查找表,并自动生成action creator,action类型字符串和一个reducer函数
  -->
</body>

</html>